﻿@model EasyHome.Models.TablaGenerica

@{
    ViewBag.Title = "Tabla Genérica - Editar";
}

<h2>Editar</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    <div class="form-horizontal">
        <h4>TablaGenerica</h4>
        <div class="alert alert-warning fade in"  style="display:none;">
            <strong>Cuidado!!</strong> Debe seleccionar una tabla para continuar.
        </div>
        <hr />
        @Html.ValidationSummary(true)
        @Html.HiddenFor(model => model.id)

        <div class="form-group">
            @Html.LabelFor(model => model.Descripcion, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Descripcion, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Descripcion)
            </div>
        </div>

        <div class="panel panel-default" style="width: 35%; float: left; ">
            <!-- Default panel contents -->
            <div class="panel-heading">
                Datos de la Tabla
                @Ajax.ActionLink("Create", "Create", "TablaDato", new { id = "btnCreateDato" }, new AjaxOptions { UpdateTargetId = "dAdicionalContenido", OnBegin = "showModal", /*LoadingElementId = "divLoading",*/ }, new { @title = "Editar Dato", @class = "btn btn-info btn-xs pull-right", @data_toggle = "tooltip" })
            </div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>
                            Descripcion
                        </th>
                        <th>
                            Abreviada
                        </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.Datos)
                    {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.Descripcion)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.DescripcionAbreviada)
                            </td>
                            <td>
                                @Ajax.ActionLink(" ", "Edit", "TablaDato", new { id = item.id }, new AjaxOptions { UpdateTargetId = "dAdicionalContenido", OnBegin = "showModal", /*LoadingElementId = "divLoading",*/ }, new { @title = "Editar Dato", @class = "glyphicon glyphicon-pencil", @data_toggle = "tooltip" })
                                @Html.ActionLink(" ", "Foo", "TablaDato", null, null, null, null, new { id = item.id, @class = "glyphicon glyphicon-search" })
                                @Ajax.ActionLink(" ", "Delete", "TablaDato", new { id = item.id },new AjaxOptions { UpdateTargetId = "dAdicionalContenido", OnBegin = "showModal", /*LoadingElementId = "divLoading",*/ },new { @title = "Borrar Dato", @class = "glyphicon glyphicon-trash", @data_toggle = "tooltip" })
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
        <div style="width: 5%; float: left">&nbsp;</div>
        <div class="panel panel-default" style="width:60%; float: left">
            <!-- Default panel contents -->
            <div class="panel-heading">
                Adicionales
                <span id="tAdic"></span>
                @Html.ActionLink("Create", "Create", "TablaAdicional", null, new { id = "btnCreateAdic", @class = "btn btn-info btn-xs pull-right" })
            </div>
            <table id="tablaAdicionales" class="table table-striped">
                <thead>
                    <tr>
                        <th>Descripcion</th>
                        <th>Nro</th>
                        <th>Texto</th>
                        <th>Fecha</th>
                        <th>V/F</th>
                        <th>Número</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
    @Html.Hidden("datoId","")
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<div id='dAdicional' class='modal fade'>
    <div class="modal-dialog">
        <div class="modal-content" id='dAdicionalContenido'></div>
    </div>
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">
        /*‒‒||‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒||‒‒*/
        $(function () {
            $.ajaxSetup({ cache: false });
            /*‒‒||‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒||‒‒*/
            $('#btnCreateAdic').click(function () {

                if ($("#datoId").val() == '') {
                    $(".alert").show();
                    window.setTimeout(function () { $(".alert").hide(); }, 5000);
                    return false;
                }
                
                var url = this.href + (this.id == 'btnCreateAdic' ? "/" + $("#datoId").val() : "")

                $('#dAdicionalContenido').load(url, function () {
                    $('#dAdicional').modal({
                        backdrop: 'static',
                        keyboard: true
                    }, 'show');
                    bindForm(this);
                });
                return false;
            });
        });
        
        function showModal() {
            $('#dAdicional').modal({
                backdrop: 'static',
                keyboard: true
            }, 'show');
        }





        /*‒‒||‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒||‒‒*/
        function bindForm(dialog) {
            $('form', dialog).submit(function () {
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                        if (result.success) {
                            $('#dAdicional').modal('hide');
                            // Refresh:
                            location.reload();
                        } else {
                            $('#dAdicionalContenido').html(result);
                            bindForm();
                        }
                    }
                });
                return false;
            });
        }

        /*‒‒||‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒||‒‒*/
        /*‒‒|| MANEJO DE LA VENTANA MODAL - CONTROL DE LA VENTANA MODAL ‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒||‒‒*/
        /*‒‒||‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒||‒‒*/
        /*
        $('#dAdicional').on('show.bs.modal', function () {
            $('.datepicker').datepicker({
                format: "dd/mm/yyyy"
            });
        });
        */
        /*
        $('#dAdicional').on('hidden.bs.modal', function () {
            $('.datepicker.dropdown-menu').each(function () {
                this.remove();
            });
        });
        */
        /*‒‒||‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒||‒‒*/
        $('.glyphicon-search').click(function () {
            $("#datoId").val(this.id);
            $('#tAdic').html(' - ' + $(this).closest('tr').children().first().html());
            $.ajax({
                url: '@Url.Action("Foo", "TablaDato")',
                type: 'GET',
                cache: false,
                data: { id: this.id },
                success: function (person) {
                    $('#tablaAdicionales').replaceWith(person)

                    $('#tablaAdicionales tbody tr td a.glyphicon').click(function () {
                        var url = this.href + (this.id == 'btnCreateAdic' ? "/" + $("#datoId").val() : "")

                        $('#dAdicionalContenido').load(url, function () {
                            $('#dAdicional').modal({
                                backdrop: 'static',
                                keyboard: true
                            }, 'show');
                            bindForm(this);
                        });
                        return false;
                    });






                },
                error: function (error) { alert(JSON.stringify(error)) }
            });
            return false;
        });
    </script>
}
